<template>
	<div class="nav">
		<span v-for="menu in menus" @click="control_clickMenu(menu)">{{$i18n.locale=='zh'?menu.name:menu.en_name}}</span>
	</div>
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	export default {
		props: {
			modelValue: {
				type: Object,
				default: []
			},
			menus: {
				type: Array,
				default: []
			},
		},
		watch: {
			'data': {
				handler(newVal, oldVal) {
					let that = this;
				},
			},
		},
		data() {
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {},
				sr: {},
				control: {}
			}
		},
		created() {
			let that = this;
			that.$nextTick(function() {
				that.xinit();
				that.public_show();
			});

		},
		methods: {
			xinit() {
				let that = this;
			},
			public_show() {
				let that = this;
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			control_clickMenu(menu) {
				let that = this;
				console.log(menu);
				if(menu && menu.code){
					console.log("===", menu.code, JSON.stringify(menu));
					that.$emit("click", menu);
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.nav {
	    display: flex;
	    justify-content: space-around;
	    background-color: #2980b9;
	    padding: $uni-spacing-row-sm;
	    overflow-x: auto;
	    white-space: nowrap;
	}
	.nav span {
	    color: white;
	    text-decoration: none;
	    padding: $uni-spacing-row-sm;
		font-size: $uni-font-size-base;
		cursor: pointer;
	}
</style>